import { useState, useEffect } from "react";
import { Form, Select, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { uniqueconfigSubmit } from "../../service";

const PrintOnlyCodeModal = ({ visible, query, checkedRows, checkedIds, handleOk, handleCancel }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [addVisible, addSetVisible] = useState(false);
	const [uniqueCodeNum, setUniqueCodeNum] = useState(false);

	useEffect(() => {
		let evenNumbers = checkedRows.filter(function (item) {
			return item.uniqueCode !== "";
		});
		setUniqueCodeNum(evenNumbers.length);
		if (visible) {
			form.resetFields();
		}
	}, [visible]);

	const onOk = () => {
		form.validateFields().then(async value => {
			const { success } = await uniqueconfigSubmit({
				ids: checkedIds,
				excType: 1
			});
			if (success) {
				message.success("操作成功");
				onCancel();
			}
			setLoading(false);
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	return (
		<CommonModal title={{ title: "唯一码打印" }} visible={true} onOk={onOk} onCancel={onCancel} minHeight="150px">
			<Form form={form} name="mark-unuaual-modal">
				<Form.Item
					label="唯一码数量："
					name="timeOutType"
					labelCol={{
						span: 5
					}}
				>
					<div>{uniqueCodeNum}</div>
				</Form.Item>
				<Form.Item
					label="指派逻辑："
					name="timeOutType"
					labelCol={{
						span: 5
					}}
				>
					<Select placeholder="请选择拿货逻辑">
						<Option value="1">当前选中唯一码</Option>
					</Select>
				</Form.Item>
			</Form>
		</CommonModal>
	);
};

export default PrintOnlyCodeModal;
